<template>
	<view class="content">
		<z-paging style="height: 100%;" ref="paging" auto-show-back-to-top :enable-back-to-top="currentIndex===tabIndex"
			v-model="dataList" @query="queryList" :fixed="false" :mounted-auto-call-reload="false"
			loading-more-no-more-text="暂无更多">
			<empty-view slot="empty">
				<no-data customClass="bg-f5"></no-data>
			</empty-view>
			<view>
				<view style="height:60px" v-for="(item,index) in dataList" :key="index"
					class="border-b u-flex u-p-28 bg-white">
					<view class="u-flex-2">
						<view>
							<text class="color-3 u-font-16">{{item.nickname.slice(0,1)}}**</text>
							<u-tag v-if="item.is_realname === 1" class="u-m-l-8" text="实名" bg-color="#FFB2AF"
								mode="dark" size="mini" />
						</view>
						<view>
							<text class="u-font-10 color-6">{{item.mobile}}</text>
						</view>
					</view>
					<view class="u-line-2 color-6 u-flex-6 u-font-24">
						{{item.reason}}
					</view>
					<view @click="goBlackListInfo(item)" class="u-flex-1 color-3 u-font-10 u-flex u-row-right">
						<text>详情</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getBlackList
	} from '@/api/index';
	import noData from '@/components/noData/noData.vue';
	export default {
		components: {
			noData
		},
		data() {
			return {
				dataList: [],
			}
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			keyword: {
				type: String,
			}

		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						setTimeout(() => {
							this.$refs.paging.reload();
						}, 5);
					}
				},
				immediate: true
			},
			keyword(val) {
				setTimeout(() => {
					this.$refs.paging.reload();
				}, 5);
			}
		},
		methods: {
			async queryList(page, pageSize) {
				const postData = {
					page,
					pageSize,
					keyword: this.keyword,
					// 1送养人 2领养人
					identity: this.currentIndex + 1
				}
				const res = await getBlackList(postData);
				this.$refs.paging.complete(res.data.list);
			},
			goBlackListInfo(item) {
				uni.navigateTo({
					url: "/pagesIndex/blackListInfo/blackListInfo?id=" + item.id
				})
			},
		}
	}
</script>

<style>
	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}
</style>
